<!--
 * @Author: Zhangxx 2425792130@qq.com
 * @Date: 2024-05-27 14:38:40
 * @LastEditors: restart 2425792130@qq.com
 * @LastEditTime: 2024-08-14 14:43:03
 * @FilePath: \eyetrackingManagement-web\src\views\report\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div>
        <el-form :model="form" :inline="true" class="demo-form-inline">
            <el-form-item label="姓名">
                <el-input v-model="form.patientName" @keyup.enter.native="search" />
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="form.phone" @keyup.enter.native="search" />
            </el-form-item>
            <el-form-item label="建档时间">
                <el-date-picker v-model="form.date" type="daterange" range-separator="-" start-placeholder="开始日期"
                    end-placeholder="结束日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="dateChange" />
            </el-form-item>
            <el-form-item label="医院">
                <el-select v-model="form.hospitalId" @change="hospitalChange">
                    <el-option v-for="item in hospitalValue" :label="item.hospitalName" :value="item.id"
                        :key="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button class="search" @click="search">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column label="序号" type="index" :index="indexMethod(1)" width="55px" align="center" />
            <el-table-column prop="patientName" label="姓名" width="100px" align="center" />
            <el-table-column prop="phone" label="手机号" width="130px" align="center" />
            <el-table-column prop="gender" label="性别" width="55px" align="center" />
            <el-table-column prop="age" label="年龄" width="55px" align="center" />
            <el-table-column prop="hospitalName" label="医院" align="center" />
            <el-table-column prop="startTime" label="测评时间" align="center" />
            <el-table-column prop="doctorName" label="医生" align="center" />
            <el-table-column prop="testProject" label="测评项目" align="center" />
            <el-table-column prop="reportStatus" label="报告状态" align="center" />
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button
                      link
                      @click.prevent="handleEdit(scope.row)"
                      type="primary"
                      :disabled="scope.row.reportStatus === '未出'"
                      class="btnStyle"
                    >查看报告</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination v-model:current-page="form.pageNum" v-model:page-size="form.pageSize"
                :page-sizes="[5, 10, 15, 20]" background layout=" prev, pager, next, sizes, jumper,total" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import { getHospitalList } from '@/api/patient/index'
import { getReportList } from '@/api/report/index'
import { IReportListParams } from '@/types/report'
import { IHospitalResponse, IReportResponse } from '@/types/api'
import { IHospitalResultType } from '@/types/patient'
import { IRecodesType } from '@/types/report'
const store = useStore();
const router = useRouter()
const route = useRoute()
// const startTime = ref('')
// const endTime = ref('')
const form: IReportListParams = reactive({
    patientId: '',
    patientName: '',
    phone: '',
    date: '',
    hospitalId: '',
    startDate: '',
    endDate: '',
    pageSize: 10,
    pageNum: 1
})
form.patientId = route.query.patientId as string
const indexMethod = (index: number) => {
    return index
}
//获取医院数据
const hospitalValue = ref<IHospitalResultType[]>([])
//获取报告数据
const getReportData = async (value: IReportListParams) => {
    const res: IReportResponse = await getReportList(value)
    tableData.value = res.data.result.records
    tableData.value.forEach((item: IRecodesType) => {
        if (item.gender == 1) {
            item.gender = '男'
        } else {
            item.gender = '女'
        }
        if (item.reportStatus == '0') {
            item.reportStatus = '未出'
        } else {
            item.reportStatus = '已出'
        }
        if(item.testProject) {
            item.testProject = '眼动追踪测评项目'
        }
    })
    total.value = Number(res.data.result.total)
}

const dateChange = (val: any) => {
    if (val) {
        form.startDate = val[0]
        form.endDate = val[1]
    } else {
        form.startDate = ''
        form.endDate = ''
    }
    getReportData(form)
}
//测评报告数据
const tableData = ref<IRecodesType[]>([])
const total = ref(0)
const reset = () => {
    form.patientName = '';
    form.phone = '';
    form.date = '';
    form.hospitalId = '';
    form.startDate = '';
    form.endDate = '';
    form.pageNum = 1;
    form.pageSize = 10;
    getReportData(form)
}
const search = () => {
    form.patientName = form.patientName.trim()
    form.phone = form.phone.trim()
    if (form.date && form.date !== '') {
        form.startDate = form.date[0]
        form.endDate = form.date[1]
    }
    getReportData(form)
}
const handleEdit = (item: IRecodesType) => {
    /*const url = router.resolve({
        path: 'reportView',
        query: {
            taskId: item.taskid
        }
    })
    let page: any = window.open(url.href, "_blank")
    page.onload = function () {
        page.document.title = item.testProject + '报告'
    }
    */
   console.log(item,111111111)
   router.push({
    path:'/reportTemplate',
    query:{
        taskId:item.taskid,
        flag:1
    }
   })
}
//分页数据
const handleSizeChange = (val: number) => {
    form.pageSize = val
    form.pageNum = 1
    getReportData(form)
}
const handleCurrentChange = (val: number) => {
    sessionStorage.setItem("messagePage", val as any);
    form.pageNum = val
    getReportData(form)
}
const hospitalChange = (id: string) => {
    form.hospitalId = id
    getReportData(form)
}
const allPages = ref()
onMounted(async () => {
    store.commit('updateTitle', '眼动记录')
    const res: IHospitalResponse = await getHospitalList()
    hospitalValue.value = res.data.result
    allPages.value = sessionStorage.getItem("messagePage")
    if(allPages.value != undefined) {
        form.pageNum = Number(allPages.value)
        console.log(form.pageNum)
    }
    getReportData(form)
})
</script>
<style lang="scss" scoped>
.demo-form-inline .el-input {
    --el-input-width: 160px;

}

.demo-form-inline .el-select {
    --el-select-width: 160px;

}

::v-deep .el-form-item__label {
    color: black;
    font-size: 18px;
    font-weight: 400;

}

.search {
    background-color: rgba(22, 155, 213, 1);
    color: white;

}

.add {
    border-color: rgba(0, 0, 255, 1);

}

a {
    display: block;
    text-decoration: none;

}

.pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 50px;

}
// .btnStyle {
//     :deep(.el-button--primary.is-link) {
//         color: #0000EE;

//     }
// }
// :deep(.el-button--primary.is-link) {
//     color: #0000EE;
// }
</style>